<template>
    <div id="cash_summary">
        <el-card class="mg-b-10">
            <el-row class="mg-b-10">
                <el-col :span="8">
                    <div class="grid-content">
                        <el-select size="mini" v-model="value" disabled>
                            <el-option  v-for="(item, index) in options" :label="item" :value='index' :key="index">省</el-option>
                        </el-select>
                        <el-select size="mini" v-model="value" disabled>
                            <el-option v-for="(item, index) in options" :label="item" :value='index' :key="index">省</el-option>
                        </el-select>
                        <el-select size="mini" v-model="value" disabled>
                            <el-option v-for="(item, index) in options" :label="item" :value='index' :key="index">省</el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content">
                        <el-date-picker
                        v-model="year"
                        type="year"
                        :clearable="false"
                        size="mini"
                        @change="handleChange"
                        placeholder="选择年">
                        </el-date-picker>
                        <el-select size="mini" v-model="month" placeholder="选择月份" @change="handleChange">
                            <el-option v-for="(item) in 12" :label="item + '月'" :value='item' :key="item"></el-option>
                        </el-select>
                        <el-select size="mini" v-model="valueTime" @change="handleChange">
                            <el-option label="整月" value="all">整月</el-option>
                            <el-option label="上半月" value="top">上半月</el-option>
                            <el-option label="下半月" value="bottom">下半月</el-option>
                        </el-select>
                        <el-select size="mini" v-model="storeType" class="select-prefix" @change="handleChange">
                            <template slot = "prefix">
                                <span class = 'prefixSlot'>门店类型</span>
                            </template>
                            <el-option v-for="(item, index) in $Options.storeTypes" :label="item.label" :value='item.value' :key="index"></el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content col_float_right">
                        <el-button type="primary" size="mini" @click="downLoadSummary"><i class="iconfont xiazai" style="font-size: 12px"></i>下 载</el-button>
                    </div>
                </el-col>
            </el-row>
            <el-row style="line-height: 28px;height: 28px">
                <el-col :span="16">
                    <div class="grid-content">
                        <el-row>
                            <el-col :span="3">
                                <div class="grid-content">
                                    <span class="span-text">---</span>
                                </div>
                            </el-col>
                            <el-col :span="3">
                                <div class="grid-content">
                                    <span class="span-text">---</span>
                                </div>
                            </el-col>
                            <el-col :span="3">
                                <div class="grid-content">
                                    <span class="span-text">---</span>
                                </div>
                            </el-col>
                            <el-col :span="3">
                                <div class="grid-content">
                                    <span class="span-text">---</span>
                                </div>
                            </el-col>
                            <el-col :span="3">
                                <div class="grid-content">
                                    <span class="span-text">---</span>
                                </div>
                            </el-col>
                            <el-col :span="3">
                                <div class="grid-content">
                                    <span class="span-text">---</span>
                                </div>
                            </el-col>
                            <el-col :span="3">
                                <div class="grid-content">
                                    <span class="span-text">---</span>
                                </div>
                            </el-col>
                            <el-col :span="3">
                                <div class="grid-content">
                                    <span class="span-text">---</span>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content col_float_right">
                        <div >
                            <span class="span-text" style="color:#ff7068;font-family: Microsoft YaHei;">筛选差异数据： </span>
                            <el-switch
                            v-model="statuValue"
                            active-color="#13ce66"
                            @change="handleChange"
                            inactive-color="#ff4949">
                            </el-switch>
                        </div>
                        <el-radio-group v-model="dateRadio" size="mini" @change="handleChangeRadio">
                            <el-radio-button label="1">日</el-radio-button>
                            <el-radio-button label="2">周</el-radio-button>
                            <el-radio-button label="3">月</el-radio-button>
                        </el-radio-group>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <el-card>
            <el-table stripe :data="tableData" border :cell-style="handleCellStyle">
                <el-table-column label="门店名称" prop="storeName" width="120" show-overflow-tooltip :fixed="dateRadio != 1 ? false : true"></el-table-column>
                <el-table-column prop="storeType" label="门店类型" >
                    <template slot-scope="scope" >
                        <span>
                            {{scope.row.storeType == 1 ? '加盟店' : scope.row.storeType == 2 ? '合作店' : scope.row.storeType == 3 ? '会员店' : '未知类型'}}
                        </span>
                    </template>
                </el-table-column>
                <template v-if="dateRadio == 1">
                    <template v-if="valueTime == 'all'">
                        <el-table-column v-for="item in tHeadArr" :key="''+item" :prop="'day'+item" :label="month  + (item < 10 ? '-0' + item : '-' + item)" width="120">
                            <template slot-scope="scope">
                                <span v-if="scope.row['day'+item] && scope.row['day'+item].indexOf(',') > -1">
                                    <span>
                                        {{scope.row['day'+item].split(',')[0]}}
                                    </span>
                                    <span v-if="scope.row['day'+item].split(',')[1] !=1" style="color: #ff7068">
                                        ({{scope.row['day'+item].split(',')[1]}})
                                    </span>
                                </span>
                                <span v-else >
                                    {{'--'}}</span>
                            </template>
                        </el-table-column>
                    </template>
                    <template v-if="valueTime == 'top'">
                        <el-table-column v-for="item in tHeadArr" :key="''+item" :prop="'day'+item" :label="month  + (item < 10 ? '-0' + item : '-' + item)" width="120">
                            <template slot-scope="scope">
                                <span v-if="scope.row['day'+item] && scope.row['day'+item].indexOf(',') > -1">
                                    <span>
                                        {{scope.row['day'+item].split(',')[0]}}
                                    </span>
                                    <span v-if="scope.row['day'+item].split(',')[1] !=1" style="color: #ff7068">
                                        ({{scope.row['day'+item].split(',')[1]}})
                                    </span>
                                </span>
                                <span v-else >
                                    {{'--'}}</span>
                            </template>
                        </el-table-column>
                    </template>
                    <template v-if="valueTime == 'bottom'">
                        <el-table-column v-for="item in tHeadArr" :key="''+item" :prop="'day'+item" :label="month  + (item < 10 ? '-0' + item : '-' + item)" width="120">
                            <template slot-scope="scope">
                                <span v-if="scope.row['day'+item] && scope.row['day'+item].indexOf(',') > -1">
                                    <span>
                                        {{scope.row['day'+item].split(',')[0]}}
                                    </span>
                                    <span v-if="scope.row['day'+item].split(',')[1] !=1" style="color: #ff7068">
                                        ({{scope.row['day'+item].split(',')[1]}})
                                    </span>
                                </span>
                                <span v-else >
                                    {{'--'}}</span>
                            </template>
                        </el-table-column>
                    </template>
                </template>
                <template v-if="dateRadio == 2">
                    <template v-if="valueTime == 'all'">
                        <el-table-column v-for="item in 5" :key="''+item" :prop="'week' +item"   :label="'第' + item + '周'" >
                            <template slot-scope="scope">
                                <span v-if="scope.row['week'+item] && scope.row['week'+item].indexOf(',') > -1">
                                    <span>
                                        {{scope.row['week'+item].split(',')[0]}}
                                    </span>
                                    <span style="color: #ff7068">
                                        ({{scope.row['week'+item].split(',')[1]}})
                                    </span>
                                </span>
                                <span v-else >
                                    {{'--'}}
                                </span>
                            </template>
                        </el-table-column>
                    </template>
                    <template v-if="valueTime == 'top'">
                        <el-table-column v-for="item in 3" :key="''+item" :prop="'week' +item"   :label="'第' + item + '周'" >
                            <template slot-scope="scope">
                                <span v-if="scope.row['week'+item] && scope.row['week'+item].indexOf(',') > -1">
                                    <span>
                                        {{scope.row['week'+item].split(',')[0]}}
                                    </span>
                                    <span style="color: #ff7068">
                                        ({{scope.row['week'+item].split(',')[1]}})
                                    </span>
                                </span>
                                <span v-else >
                                    {{'--'}}
                                </span>
                            </template>
                        </el-table-column>
                    </template>
                    <template v-if="valueTime == 'bottom'">
                        <el-table-column v-for="item in [4,5]" :key="''+item" :prop="'week' +item"   :label="'第' + item + '周'" >
                            <template slot-scope="scope">
                                <span v-if="scope.row['week'+item] && scope.row['week'+item].indexOf(',') > -1">
                                    <span>
                                        {{scope.row['week'+item].split(',')[0]}}
                                    </span>
                                    <span style="color: #ff7068">
                                        ({{scope.row['week'+item].split(',')[1]}})
                                    </span>
                                </span>
                                <span v-else >
                                    {{'--'}}
                                </span>
                            </template>
                        </el-table-column>
                    </template>
                </template>
                <template v-if="dateRadio == 3">
                    <el-table-column :label="valueTime == 'all' ? month +'月总计' : valueTime == 'top' ? month +'月上半月总计' : valueTime == 'bottom' ? month +'月下半月总计' : ''" 
                        :prop="valueTime == 'all' ? 'monthAll' : valueTime == 'top' ? 'monthS' : valueTime == 'bottom' ? 'monthX' : ''"
                    >
                        <template slot-scope="scope">
                            <template v-if="valueTime == 'all'">
                                <span v-if="scope.row['monthAll'] && scope.row['monthAll'].indexOf(',') > -1">
                                    <span>
                                        {{scope.row['monthAll'].split(',')[0]}}
                                    </span>
                                    <span style="color: #ff7068">
                                        ({{scope.row['monthAll'].split(',')[1]}})
                                    </span>
                                </span>
                                <span v-else >
                                    {{'--'}}
                                </span>
                            </template>
                            <template v-if="valueTime == 'top'">
                                <span v-if="scope.row['monthS'] && scope.row['monthS'].indexOf(',') > -1">
                                    <span>
                                        {{scope.row['monthS'].split(',')[0]}}
                                    </span>
                                    <span style="color: #ff7068">
                                        ({{scope.row['monthS'].split(',')[1]}})
                                    </span>
                                </span>
                                <span v-else >
                                    {{'--'}}
                                </span>
                            </template>
                            <template v-if="valueTime == 'bottom'">
                                <span v-if="scope.row['monthX'] && scope.row['monthX'].indexOf(',') > -1">
                                    <span>
                                        {{scope.row['monthX'].split(',')[0]}}
                                    </span>
                                    <span style="color: #ff7068">
                                        ({{scope.row['monthX'].split(',')[1]}})
                                    </span>
                                </span>
                                <span v-else >
                                    {{'--'}}
                                </span>
                            </template>
                        </template>
                    </el-table-column>
                </template>
            </el-table>
            <page :total="total" :page="page" :size="size" @handlepagechange="handlePageChange" @handleSizeChange="handleSizeChange"></page>
        </el-card>
        
    </div>
</template>
<script>
    import page from '../commonComponents/page'
    export default {
        components: { page },
        data() {
            return {
                page: 1,
                size: 10,
                total: 0,
                tableData: [],
                options: [],
                value: '',
                dateRadio: 1,
                statuValue: 0,
                tableHeader: '',
                year : new Date(),
                month: new Date().getMonth() + 1,
                storeType: 0,
                valueTime: 'all',
                downLoadUrl: '/youbao/finance/api/finance-payment/list/export',
                tHead: '',
                tHeadArr: []
            }
        },
        watch: {
            dateRadio(val) {
                // this.handleChangeRadio(val)
            }
        },
        mounted() {
            
            this.handleChangeRadio()
        },
        created() {
            this.$nextTick(() => {
                this.judgeMonthDays()
            })
        },
        methods: {
            getCashSummary() {
                var endTime;
                if(this.month < 12) {
                    let endDate= this.year.getFullYear() + '-' + (this.month+1) + '-01' + ' 00:00:00'
                    endTime= new Date(endDate).getTime()-24*60*60*1000
                  
                }else{
                    let date1= this.year.getFullYear() + 1 + '-01-01 00:00:00'
                    endTime= new Date(date1).getTime() - 24*60*60*1000
                   
                }
                this.tableData= []
                try{
                    let params= {
                        page: this.page,
                        size: this.size,
                        isPaid: this.statuValue ? 1 : 0,
                        startTime: this.month > 9 ? this.year.getFullYear() + '-' + this.month + '-01' : this.year.getFullYear() + '-0' + this.month + '-01',
                        endTime: this.formate(endTime, 'yyyy-MM-dd')
                    }
                    if(this.storeType != 0 ) {
                        params.storeType= this.storeType
                    }else{
                        params.storeType= ''
                    }
                    if(this.dateRadio == 1) {
                        this.$server.financialControlApi.getCashSummaryList(params).then(res => {  
                            this.tableData= res.data
                            this.total= res.total
                        })
                    }else if(this.dateRadio == 2) {
                        this.$server.financialControlApi.getCashSummaryListByWeek(params).then(res => {
                            
                            this.tableData= res.data
                            this.total= res.total
                        })
                    }else if(this.dateRadio == 3) {
                        this.$server.financialControlApi.getCashSummaryListByMonth(params).then(res => {   
                            this.tableData= res.data
                            this.total= res.total
                        })
                    }
                }catch(err) {this.$paramsError(err)}
         
            },
            getCashSummaryListByWeek() {

            },
            handleChange() {
                
                this.judgeMonthDays()
                this.handleChangeRadio()
            },
            handleChangeRadio(val) {
                this.getCashSummary()
            },
            handlePageChange(page) {
                this.page= page
                this.getCashSummary()
            },
            handleSizeChange(size) {
                this.size= size
                this.getCashSummary()
            },
            /**判断当前月份天数 */
            judgeMonthDays() {
                let year= this.year.getFullYear(),
                    month= this.month,
                    arr= []
                
                /**判断当前年份闰月 */
                if((year % 4 == 0 && year%100 != 0) || year % 400 == 0) {
                    if(month == 2) {
                        this.tHead= 29
                    }
                }else{
                    if([1,3,5,7,8,10,12].indexOf(this.month) > -1) {
                        this.tHead= 31
                    }else if([4,6,9,11].indexOf(this.month) > -1) {
                        this.tHead= 30
                    }else if(this.month == 2) {
                        this.tHead= 28
                    }
                }
                for( var i=1; i<= this.tHead; i++) {
                    arr.push(i)
                }
                if(this.valueTime == 'all') {
                    this.tHeadArr= arr
                }else if(this.valueTime == 'top') {
                    this.tHeadArr= arr.splice(0,15)
                }else if(this.valueTime == 'bottom') {
                    this.tHeadArr= arr.splice(15)
                }
                
                console.log( this.tHeadArr, ' this.tHead')
            },
            /**汇总下载 */
            downLoadSummary() {
                try {
                    let obj= {
                        url: process.env.BASE_API + this.downLoadUrl,
                        name: this.year.getFullYear()+'-' + this.month + '打款汇总',
                        params: {
                            startTime: this.year.getFullYear() + '-' + this.month + '-01',
                            endTime: this.year.getFullYear() + '-' + this.month + '-31',
                            storeType: this.storeType == 0 ? '' : this.storeType
                        }
                    }
                    this.$server.excelApi.downLoadExcel(obj)
                }catch(err){this.$paramsError(err)}
            },
            /** 差异数据添加背景颜色标示 */
            handleCellStyle({row, column, rowIndex, columnIndex}) {
                if(column.property != 'storeName' && column.property != 'storeType') {
                    if(row[column.property]) {
                            if(row[column.property].indexOf(',') ) {
                                if(row[column.property].split(',')[1] == 0 ||  row[column.property].split(',')[0] != row[column.property].split(',')[1]) {
                                    return 'background: #FFE8E4'
                                }else{
                                    return ''
                                }
                            }else{
                                return '';
                            }
                        
                    }else{
                        return '';
                    }
                }
            },
        }
    }
</script>
<style lang="less" scoped>
    .grid-content {
        white-space: nowrap;
        .el-switch {
            line-height: 28px !important;
            height: 28px !important;
            margin-right: 10px;
        }
        .span-text {
            font-size: 12px;
           	font-family: Microsoft YaHei;
            color: #666;
        }
    }
    
    .el-select, .el-date-editor {
        width: 120px;
    }
    .select-prefix {
        width: 200px
    }
    
</style>